﻿<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <script>
        if (top !== self) top.location = self.location;
    </script>
    <link rel="stylesheet" type="text/css" href="../static/app/css/login.css" th:href="@{/app/css/loginYellow.css}">
    <style type="text/css">
        .container {
            padding: 40px 0;
        }
    </style>
</head>
<body>

<div style="text-align:center;margin:130px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#000000">
    <h1>BOOT-MATILDA</h1>
</div>

<div class="wrapper">
    <div class="container">
        <h2>欢迎使用</h2>
        <form id="loginForm" class="form" method="POST" th:action="@{/login}" onsubmit="return false;">
            <div id="errorMsg" style="color: red" th:text="${errorMsg}"></div>
            <input name="username" type="text" autocomplete="off" placeholder="用户名" th:value="${username}"/>
            <input name="password" type="password" placeholder="密码"/>
            <!--<input name="validCode" type="validCode" placeholder="验证码">
            <img id="codeImg" alt="验证码" onclick="freshCode();" style="width: 140px;height: 40px;border-radius: 3px;"
                 src="">
            <a href="javascript:freshCode();">看不清?换一张</a>
            <br>-->
            <button type="submit" id="login-button">登陆</button>
        </form>
    </div>

    <ul class="bg-bubbles">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

</div>

<script src="../static/lib/jquery/jquery-1.11.1.min.js" type="text/javascript"
        th:src="@{/lib/jquery/jquery-1.11.1.min.js}"></script>
<script>
    $(function () {
        $('[name=username]').val('admin');
        $('[name=password]').val('123456');

        $("#login-button").trigger("focus").click(function (event) {
            event.preventDefault();
            if (checkForm()) {
                $("form").fadeOut(500);
                $(".wrapper").addClass("form-success");
                setTimeout(function () {
                    $("form")[0].submit();
                }, 1000);
            }
        });
    });


    function checkForm() {
        var username = $("[name=username]").val();
        if (!username) {
            $("#errorMsg").html("用户名不能为空");
            return false;
        }
        var password = $("[name=password]").val();
        if (!password) {
            $("#errorMsg").html("密码不能为空");
            return false;
        }
//        var validCode = $("[name=validCode]").val();
//        if (!validCode) {
//            $("#errorMsg").html("验证码不能为空");
//            return false;
//        }
        // $("[name=password]").val(hex_md5(password));
        return true;
    }

    function freshCode() {
        $("#codeImg").attr("src", "/VerificationCodeServlet?" + Math.random());
    }
</script>

</body>
</html>